<!DOCTYPE html>
<html>
<head>
    <title></title>
		<#include "/header.html">
    <style type="text/css">
      .row {
        border-top: 0px dotted #ddd;
        margin: 0 0 15px 0;
        padding: 0px 2px 0px 2px;
      }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <!------------------------------------------------------------>

    <!------------------------------------------------------------>
    <div v-show="showList" class="grid-btn">
      <div class="row">
            <div class="col-xs-4">
                <el-select size="small" style="width: 100%" v-model="q.etlSystem" placeholder="请选择作业系统名称" clearable>
                    <el-option v-for="option in allsys" :key="option.code" :label="option.name" :value="option.code"></el-option>
                </el-select>
            </div>
            <div  class="col-xs-4">
                <el-date-picker v-model="q.data_date" size="small" style="width: 100%" type="date" placeholder="数据日期" value-format="yyyy-MM-dd"></el-date-picker>
                <input type="hidden" id="dtp_input2" value="" />
            </div>
            <div class="col-xs-4">
                <el-input v-model="q.etlJob" size="small" placeholder="请输入要查询的作业名称" clearable></el-input>
            </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
            <a class="btn btn-default btn-sm" @click="query(true)"><i class="fa fa-search"></i> 查询</a>
            <a class="btn btn-primary btn-sm" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
            <a class="btn btn-primary btn-sm" @click="loadlog" ><i class="fa fa-search"></i>&nbsp;查看日志详情</a>
            <a class="btn btn-primary btn-sm"   @click="logdload" ><i class="fa fa-download"></i>&nbsp;下载日志详情</a>
            <a class="btn btn-primary btn-sm" @click="timeline"><i class="fa fa-clock-o"></i>&nbsp;作业时间轴</a>
          </div>
        </div>
    </div>

<div class="ml-15 mr-15" id="tableLayout">
    <div>
        <el-table
                :data="dataPage.list"
                border
                size="small"
                height="452"
                :stripe="true"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="50">
            </el-table-column>
            <el-table-column
                    label="序号"
                    :formatter="colIndex"
                    width="70"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="etlSystem"
                    label="作业系统名称"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="etlJob"
                    label="作业名称"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="jobsessionid"
                    label="会话ID"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="txdate"
                    label="数据日期"
                    :show-overflow-tooltip="true"
                    align="center">
                <template slot-scope="scope">
                    <span>{{dateFormat('YYYY-mm-dd',scope.row.txdate)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="starttime"
                    label="开始时间"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="endtime"
                    label="结束时间"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="dataPage.currPage"
                :page-size="dataPage.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataPage.totalCount">
        </el-pagination>
    </div>
</div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">

            <div class="form-group">
                <div class="col-sm-2 control-label">作业系统</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="jobLog.etlSystem" placeholder="作业系统"/>
                </div>
            </div>
					<div class="form-group">
                        <div class="col-sm-2 control-label">作业名称</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.etlJob" placeholder="作业名称"/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label">会话ID</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.jobsessionid" placeholder="会话ID"/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label">步骤ID</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.jobstepid" placeholder="步骤ID"/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label">脚本名称</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.scriptfile" placeholder="脚本名称"/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label">数据日期</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.txdate" placeholder="数据日期"/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label">开始时间</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.starttime" placeholder="开始时间"/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label">结束时间</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.endtime" placeholder="结束时间"/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label"></div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.returncode" placeholder=""/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label"></div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="jobLog.seconds" placeholder=""/>
                        </div>
                    </div>

        </form>
    </div>
    <!-- 按钮触发模态框 -----------------------------------------------------@click="loadlog"------>
    <!--<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="loadlog" ><i class="fa fa-search"></i>&nbsp;查看日志详情</button>-->
    <!--<button class="btn btn-primary"   @click="logdload" ><i class="fa fa-download"></i>&nbsp;下载日志详情</button>-->
    <!-- 模态框（Modal） -->
    <el-dialog title="作业日志详情" :visible="myModal" :close-on-click-modal="false" :show-close="false" width="70%">
        <div class="modal-body" v-html="joblogdetail">
        </div>
        <div slot="footer" class="dialog-footer">
            <a class="btn btn-primary btn-sm" @click="logdload">下载日志</a>
            <a class="btn btn-default btn-sm" @click="myModal = false">关闭日志</a>
        </div>
    </el-dialog>
    <!-------------------------------------------------------------------------->
    <div id="timelineLayer" style="height:100%;width:100%;display:none;">
    <div style="height:40px;clear:both;">
        <form class="form-inline">
            <div style="float:right;margin-right:20px;">
                <a class="btn btn-primary" onclick="vm.backlist()"> &nbsp;返回 </a>
            </div>
        </form>

    </div>
    <div id="timelineChart" style="width:100%;height:calc(100% - 40px);overflow-y: auto;"></div>
</div>
</div>

<link href="${request.contextPath}/statics/js/modules/etl/script-log/history.css" rel="stylesheet">
<script src="${request.contextPath}/statics/js/modules/etl/joblog.js"></script>

</body>
</html>
